<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>合智国际物流订单运输查询系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="app">
    <div class="order-tracking-wrapper">
        <!-- 左侧装饰元素 -->
        <div class="left-decoration">
            <div class="decoration-line"></div>
            <div class="decoration-icons">
                <i class="el-icon-truck"></i>
                <i class="el-icon-box"></i>
                <i class="el-icon-location-information"></i>
            </div>
        </div>

        <!-- 主内容区域 -->
        <div class="order-tracking-container">
            <!-- 固定头部区域 -->
            <div class="fixed-header">
                <!-- 顶部Logo和标题 -->
                <div class="header-area">
                    <div class="company-brand">
                        <img src="./assets/logo3.jpeg" style="height: 48px; width: 150px" />
                        <h1 class="company-name">合智国际物流订单运输查询系统</h1>
                    </div>
                    <div class="system-time">{{ currentTime }}</div>
                </div>

                <!-- 固定搜索区域 -->
                <div class="search-box">
                    <el-input
                            size="medium"
                            v-model="searchForm.orderNo"
                            placeholder="请输入订单编号"
                            clearable
                            @keyup.enter="handleSearch"
                            class="search-input"
                    >
                        <template #append>
                            <el-button size="medium" type="primary" icon="el-icon-search" @click="handleSearch" class="search-btn">查询</el-button>
                        </template>
                    </el-input>
                </div>
            </div>

            <!-- 可滚动内容区域 -->
            <div class="scrollable-content">
                <div class="content-box" v-if="orderInfo">
                    <!-- 订单基本信息 -->
                    <div class="order-card">
                        <div class="order-header">
                            <h3><i class="el-icon-document"></i> 订单信息</h3>
                        </div>

                        <el-descriptions :column="3" border class="order-descriptions">
                            <el-descriptions-item label="下单时间" label-class-name="desc-label">{{ orderInfo.createTime }}</el-descriptions-item>
                            <el-descriptions-item label="运输线路" label-class-name="desc-label">北京 → 上海</el-descriptions-item>
                            <el-descriptions-item label="预计时间" label-class-name="desc-label">2023-06-18</el-descriptions-item>
                            <el-descriptions-item label="货物件数" label-class-name="desc-label">5件</el-descriptions-item>
                            <el-descriptions-item label="货物体积" label-class-name="desc-label">0.85m³</el-descriptions-item>
                            <el-descriptions-item label="货物毛重" label-class-name="desc-label">125.6kg</el-descriptions-item>
                        </el-descriptions>
                    </div>

                    <!-- 物流跟踪信息 -->
                    <div class="tracking-card">
                        <div class="tracking-header">
                            <h3 class="tracking-title">
                                <i class="el-icon-truck"></i>
                                运输跟踪信息
                            </h3>
                            <el-button size="medium" type="primary" icon="el-icon-refresh" @click="refreshTracking" :loading="refreshing" class="refresh-btn"
                            >刷新</el-button
                            >
                        </div>

                        <!-- 增强版时间轴 -->
                        <div class="enhanced-timeline">
                            <div v-for="(track, index) in orderInfo.shippingInfo.tracks" :key="index" class="timeline-item" :class="{ 'active-item': index === 0 }">
                                <div class="timeline-dot">
                                    <div class="dot-core" :class="`status-${getTrackStatusLevel(track.status)}`">
                                        <i :class="getStatusIcon(track.status)"></i>
                                    </div>
                                    <div class="dot-line" v-if="index !== orderInfo.shippingInfo.tracks.length - 1"></div>
                                </div>
                                <div class="timeline-content">
                                    <div class="track-time">
                                        <i class="el-icon-time"></i>
                                        {{ track.time || '时间未知' }}
                                    </div>
                                    <div class="track-status">
                                        <span class="status-text">{{ track.status }}</span>
                                        <el-tag v-if="index === 0" type="success" size="mini" effect="dark" style="margin-left: 10px">最新状态</el-tag>
                                    </div>
                                    <div class="track-detail">
                                        <div v-if="track.location" class="detail-item">
                                            <i class="el-icon-location-information"></i>
                                            <span>{{ track.location }}</span>
                                        </div>
                                        <div v-if="track.operator" class="detail-item">
                                            <i class="el-icon-user"></i>
                                            <span>{{ track.operator }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div v-if="orderInfo.shippingInfo.tracks.length === 0" class="empty-timeline">
                                <el-empty description="暂无运输跟踪信息"></el-empty>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 右侧装饰元素 -->
        <div class="right-decoration">
            <div class="decoration-line"></div>
            <div class="decoration-icons">
                <i class="el-icon-map-location"></i>
                <i class="el-icon-coin"></i>
                <i class="el-icon-data-line"></i>
            </div>
        </div>
    </div>
</div>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            searchForm: {
                orderNo: 'ORD20230615001',
            },
            orderInfo: null,
            refreshing: false,
            currentTime: ''
        },
        created() {
            this.updateCurrentTime();
            this.fetchOrderInfo(this.searchForm.orderNo);
            setInterval(this.updateCurrentTime, 1000);
        },
        mounted() {

        },
        methods: {
            updateCurrentTime() {
                const now = new Date();
                this.currentTime = `${now.getFullYear()}-${(now.getMonth() + 1).toString().padStart(2, '0')}-${now.getDate().toString().padStart(2, '0')} ${now
                    .getHours()
                    .toString()
                    .padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`;
            },
            fetchOrderInfo(orderNo) {
                if (orderNo !== 'ORD20230615001') {
                    this.orderInfo = {
                        id: 10086,
                        orderNo: 'ORD20230615001',
                        customerName: '张三',
                        createTime: '2023-06-15 10:30:25',
                        shippingInfo: {
                            tracks: [],
                        },
                    };
                    return;
                }
                this.orderInfo = {
                    id: 10086,
                    orderNo: 'ORD20230615001',
                    customerName: '张三',
                    createTime: '2023-06-15 10:30:25',
                    shippingInfo: {
                        tracks: [
                            {
                                time: '2023-06-17 09:00:00',
                                status: '卸货完成',
                                location: '上海浦东仓库',
                                operator: '操作员：李师傅',
                            },
                            {
                                time: '2023-06-17 08:30:00',
                                status: '正在卸货',
                                location: '上海浦东仓库',
                                operator: '操作员：王师傅',
                            },
                            {
                                time: '2023-06-16 20:30:00',
                                status: '已到达上海仓',
                                location: '上海转运中心',
                            },
                            {
                                time: '2023-06-16 16:15:00',
                                status: '已发往上海仓',
                                location: '北京转运中心',
                            },
                            {
                                time: '2023-06-15 14:30:00',
                                status: '创建订单',
                                location: '北京朝阳仓库',
                                operator: '操作员：张师傅',
                            },
                        ],
                    },
                };
            },
            handleSearch() {
                // if (!this.searchForm.orderNo) {
                //     this.$message.warning('请输入订单编号');
                // }
                this.fetchOrderInfo(this.searchForm.orderNo);
            },
            refreshTracking() {
                this.refreshing = true;
                setTimeout(() => {
                    this.$message.success('物流信息已刷新');
                    this.refreshing = false;
                }, 800);
            },
            getTrackStatusLevel(status) {
                if (status.includes('卸货')) return 3;
                if (status.includes('到达') || status.includes('正在')) return 2;
                if (status.includes('发往') || status.includes('创建')) return 1;
                return 0;
            },
            getStatusIcon(status) {
                if (status.includes('卸货')) return 'el-icon-circle-check';
                if (status.includes('到达')) return 'el-icon-office-building';
                if (status.includes('发往') || status.includes('正在')) return 'el-icon-truck';
                if (status.includes('创建')) return 'el-icon-document-add';
                return 'el-icon-document';
            },
        }
    });
</script>
</body>
</html>